<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="shortcut icon" href="/dist/img/icon.png" type="image/x-icon">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <meta http-equiv="pragma" content="no-cache">
    <meta http-equiv="Cache-Control" content="no-store, must-revalidate">
    <meta http-equiv="expires" content="Wed, 26 Feb 1997 08:21:57 GMT">
    <meta http-equiv="expires" content="-1">
    <title>OA修改密码</title>

    <!--CSS-->
    <link href="/dist/css/page/login.css" rel="stylesheet"/>

</head>
<style type="text/css">
    .text {
        display: inline-block;
        /*max-height: 0.56rem;*/
        color: #3d4444;
        overflow: hidden;
        padding-left: 0.06rem;
        word-wrap: break-word;
    }
    #edit:hover, a:focus {
        color: red;
        text-decoration: none;
    }
    #edit {
        color: #2fa8ec;
        outline: none;
        text-decoration: none;
        -webkit-transition: 0.2s;
        transition: 0.2s;
    }
    #submit{
        height: 50px;
        border:1px solid #79b9f6;
        background: #fff;
        margin-top: 80px;
        color: #79b9f6;
        font-size: 16px;
        font-weight: bold;
        text-align: center;
        line-height: 50px;
        cursor: pointer;
    }
    #submit:hover{
        background: #79b9f6;
        color:#fff;
    }
</style>
<script src="https://file.ggxqce.com/web/jquery-2.2.3.min.js"></script>
<script src="https://file.ggxqce.com/web/bootstrap.min.js"></script>
<script src="/dist/plugins/jQuery/jquery.cookie.min.js"></script>
<script src="https://file.ggxqce.com/web/vue.min.js"></script>
<script type="text/javascript" src="/dist/plugins/lhgdialog/lhgdialog.min.js?self=true"></script>
<script src="/dist/js/app_iframe.js?t=7e54a132"></script>
<script src="/dist/js/oa.js?t=54c6b89c"></script>
<script type="text/javascript">
    $(function () {
        if($.cookie('time')){
            var count = $.cookie("time");
            if(count > 1){
                $("#login").html(count+'秒后可重新获取');
                $('#login').css('pointer-events','none')
            }
            var resend = setInterval(function(){
                if (count > 1){
                    count--;
                    var exp = new Date();
                    exp.setTime(exp.getTime() + 1000*(60-count));//设置cookie 过期时间
                    $.cookie('time', count,{ expires: exp});
                    $("#login").html(count+'秒后可重新获取')
                    $('#login').css('pointer-events','none')
                }else {
                    $.cookie("time",null,{path:"/"});//好像不管用
                    clearInterval(resend);
                    $("#login").html("获取验证码");
                    $('#login').css('pointer-events','auto')
                }
            }, 1000);
        }
    });
    function sendsms(e){
        var time = 10;
        var tel=$("#tel").val();
        var reg = /^1[3|4|5|7|8][0-9]{9}$/;
        if (!reg.test($('#tel').val())) {
            alert("手机号码格式不正确")
            return false;
        }
        /*var data = {
         tel: $('#tel').val()
         };*/

        /*发送验证码功能*/
        countdown(e);                                   //若发送验证码成功，则调用倒计时函数
    }
    //倒计时函数
    var time = 60;
    function countdown(e){
        if (time == 0) {
            //e.setAttribute('disabled',false);         对没有disbaled属性的span标签，此方法无效
            $('#login').css('pointer-events','auto')
            $("#login").html("获取验证码");
            time = 60;
        }else{
            //e.attr('disabled',true);                  对没有disbaled属性的span标签，此方法也无效
            //e.setAttribute("onclick", '');            这样写也可以
            $('#login').css('pointer-events','none')
            $("#login").html(time+'秒后可重新获取');
            time--;
            var exp = new Date();
            exp.setTime(exp.getTime() + 1000*60*1);//设置cookie 过期时间
            $.cookie('time', time,{ expires: exp});
            setTimeout(function() {
                countdown(e)
            },1000)
        }
    }
</script>
<body>
<section class="content" id="app" v-cloak=>
<div class="login-container">
    <header class="htmleaf-header">
    </header>
    <div id="wrapper" class="login-page">
        <div id="login_form" class="form">
            <p style="margin-top: 20px;margin-bottom: 30px;color: #222222">
                修改密码</p>
            <form class="login-form" style="margin-top:20px">
                <input type="text" placeholder="请输入手机号："  id="tel"/>
                <input type="text" placeholder="请输入验证码："  id="yzm"/>
                <span class="text">提示：验证码将会以微信消息方式推送，请到微信企业号查看<br/>
                如果未关注企业号将无法收到验证码，您需要先<a id="edit" @click="edit()" style="cursor: pointer">点此关注</a>
                </span>
                <div id="login" style="margin-top:16px" @click="getyzm()" onclick="sendsms(this);" >获取验证码</div>
                <div id="submit" style="margin-top:16px" @click="check()">提交</div>
            </form>
        </div>
    </div>
</div>
</section>
</body>

<script type="text/javascript">
    var app = new Vue({
        el: '#app',
        data: {
            userId:'',
            yzm:'',
            tel:''
        },
        methods: {
            getyzm:function () {
                var that=this;
                var data = {
                    tel: $('#tel').val()
                };
                $.wyui.postMethod('/user/ForgetPwd.json',data,function (r) {
                    //location.href = "main.html";
                    that.userId=r.userId
                    that.yzm=r.yzm;
                });
            },
            edit:function (id) {
                var url='url:../dist/img/qiyehao.png'
                if(server.fwq){
                    if(server.fwq=="wyp"){
                        url='url:../dist/img/wyqiyehao.jpg'
                    }
                }
                $.dialog({
                    content: url,
                    title: '企业公众号',
                    width: 430,
                    height:430,
                    max: true,
                    min: true,
                    lock: true
                });
            },
            check:function() {
                var that = this;
                var data = {
                    userId: that.userId,
                    yzm:$("#yzm").val()
                };
                if($("#yzm").val()==""){
                    alert("验证码不能为空")
                }else{
                   if(that.userId==""){
                       alert("验证码失效，请重新获取")
                   } else{
                       $.ajax({
                           url: server.ip + '/user/yzmCheck.json',
                           contentType: 'application/json;charset=utf-8',
                           type: "POST",
                           data: JSON.stringify(data),
                           success: function (r) {
                               if(r.e.code==0){
                                   location.href="updatePsw.html?id="+that.userId;
                               }else{
                                   alert(r.e.desc)
                               }
                           },
                           error: function (e) {
                               alert(e.code)
                           }
                       });
                   }
                }

               /*$.wyui.postMethod('/user/yzmCheck.json',data, function (r) {
                    alert(r.code)
                })*/
            }
        },
        mounted: function () {

        }

    })
</script>
</html>
